<template>
  测试插槽
  <hr>
  匿名插槽<br>
  设置文本框作为插槽内容：
  <my-div>
    <input type="text" placeholder="父组件的插槽">
  </my-div>
  <br>
  没有设置插槽内容：
  <br>
  <my-div>
  </my-div>
  <hr>
  具名插槽
  <my-div-name>
    <template v-slot:header>
      <h1>这是头部</h1>
    </template>
    <template v-slot:footer>
      <p>这是结尾</p>
    </template>
  </my-div-name>
  <hr>
  作用域插槽
  <my-table :data="data">
    <template #td="row">
      自定义列:{{row}}
    </template>
  </my-table>
  UI库的 table
  <my-table-el :data="data">
    <template #td1="row">
      自定义列1:{{row.row.t1}}
    </template>
    <template #td2="row">
      自定义列2:{{row.row.t2}}
    </template>
  </my-table-el>

  UI库的 table 的二次封装
  <my-table-json :data="data" :colInfo="colInfo">
    <template #td_url="{ row }">
      <a :href="row.url" target="blank">{{row.name}}</a>
    </template>
    <template #td_mobile="scope">
      手机:{{scope.row.mobile}}
    </template>
  </my-table-json>

</template>

<script>
  import { reactive } from 'vue'
  import meta from './grid.json'

</script>

<script setup>
  import myDiv from './comp/my-div.vue'
  import myDivName from './comp/my-div-name.vue'
  import myTable from './comp/my-table.vue'
  import myTableEl from './comp/my-table-el.vue'
  import myTableJson from './comp/my-table-json.vue'

  const colInfo = reactive(meta.itemMeta)

  const data = reactive([
    {
      name: '天天',
      age: 18,
      mobile: '1399999991',
      url: 'https://naturefw.gitee.io/nf-rollup-ui-controller/meta-base'
    },
    {
      name: '小李',
      age: 18,
      mobile: '1399999992',
      url: 'https://naturefw.gitee.io/nf-rollup-ui-controller/meta-base'
    },
    {
      name: '路飞',
      age: 18,
      mobile: '1399999993',
      url: 'https://naturefw.gitee.io/nf-rollup-ui-controller/meta-base'
    }
  ])
</script>